<template>
  <el-select v-model="name" placeholder="请选择" filterable clearable>
    <el-option v-for="item in cargos" :key="item.id" :label="`${item.cargoSn} - ${item.cargoName}`" :value="item[valueField]" />
  </el-select>
</template>

<script setup lang="ts">
import { computed, onMounted } from "vue";
const { proxy } = getCurrentInstance();
let props = defineProps(["modelValue", "val", "list"]);
const emit = defineEmits(["update:modelValue", "fatherMethods"]);
const name = computed({
  get() {
    return props.modelValue;
  },
  set(value: any) {
    fatherAc(value);
  },
});
let valueField = computed(() => {
  return props.val ? props.val : "id";
});
let cargos = computed(() => {
  return props.list && props.list.length ? props.list : options.value;
});
let options = ref([]);
onMounted(() => {
  getInfo();
});
let getInfo = async () => {
  let { data } = await proxy.$apis.cargoQuery();
  options.value = data;
};
let fatherAc = async (newValue) => {
  if (!options.value.length) await getInfo();
  emit("update:modelValue", newValue);
  let info = proxy.$utils.findIndexByField(
    cargos.value,
    valueField.value,
    newValue
  );
  emit("fatherMethods", cargos.value[info]);
};

watch(
  () => props.modelValue,
  (newValue, oldValue) => {
    if (newValue && !oldValue) fatherAc(newValue);
  },
  { deep: true, immediate: true }
);
</script>

<style lang="scss" scoped>
</style>
